<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mapbox 矢量瓦片</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="../../dist/iclient9-leaflet.min.js"></script>
<script type="text/javascript">

    var map = L.map('map', {
        center: [39.89, 116.43],
        maxZoom: 15,
        zoom: 1
    });

    var vectorTileStyling = {
        water: {
            fill: true,
            weight: 1,
            fillColor: '#06cccc',
            color: '#06cccc',
            fillOpacity: 0.8,
            opacity: 0.4,
        },
        admin: {
            weight: 1,
            fillColor: 'pink',
            color: 'pink',
            fillOpacity: 0.8,
            opacity: 0.8
        },
        waterway: {
            weight: 1,
            fillColor: '#2375e0',
            color: '#2375e0',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        landcover: {
            fill: true,
            weight: 1,
            fillColor: '#53e033',
            color: '#53e033',
            fillOpacity: 0.8,
            opacity: 0.4,
        },
        landuse: {
            fill: true,
            weight: 1,
            fillColor: '#e5b404',
            color: '#e5b404',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        park: {
            fill: true,
            weight: 1,
            fillColor: '#84ea5b',
            color: '#84ea5b',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        boundary: {
            weight: 1,
            fillColor: '#c545d3',
            color: '#c545d3',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        aeroway: {
            weight: 1,
            fillColor: '#51aeb5',
            color: '#51aeb5',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        road: {
            weight: 1,
            fillColor: '#f2b648',
            color: '#f2b648',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        tunnel: {
            weight: 0.5,
            fillColor: '#f2b648',
            color: '#f2b648',
            fillOpacity: 0.8,
            opacity: 0.4,
        },
        bridge: {
            weight: 0.5,
            fillColor: '#f2b648',
            color: '#f2b648',
            fillOpacity: 0.8,
            opacity: 0.4,
        },
        transportation: {
            weight: 0.5,
            fillColor: '#f2b648',
            color: '#f2b648',
            fillOpacity: 0.8,
            opacity: 0.4,
        },
        transit: {
            weight: 0.5,
            fillColor: '#f2b648',
            color: '#f2b648',
            fillOpacity: 0.8,
            opacity: 0.4,
        },
        building: {
            fill: true,
            weight: 1,
            fillColor: '#2b2b2b',
            color: '#2b2b2b',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        water_name: {
            weight: 1,
            fillColor: '#022c5b',
            color: '#022c5b',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        transportation_name: {
            weight: 1,
            fillColor: '#bc6b38',
            color: '#bc6b38',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        place: {
            weight: 1,
            fillColor: '#f20e93',
            color: '#f20e93',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        housenumber: {
            weight: 1,
            fillColor: '#ef4c8b',
            color: '#ef4c8b',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        poi: {
            weight: 1,
            fillColor: '#3bb50a',
            color: '#3bb50a',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        earth: {
            fill: true,
            weight: 1,
            fillColor: '#c0c0c0',
            color: '#c0c0c0',
            fillOpacity: 0.8,
            opacity: 0.4
        },
        country_label: [],
        marine_label: [],
        state_label: [],
        place_label: [],
        waterway_label: [],
        poi_label: [],
        road_label: [],
        housenum_label: [],
        country_name: [],
        marine_name: [],
        state_name: [],
        place_name: [],
        waterway_name: [],
        poi_name: [],
        road_name: [],
        housenum_name: []
    };
    vectorTileStyling.buildings = vectorTileStyling.building;
    vectorTileStyling.boundaries = vectorTileStyling.boundary;
    vectorTileStyling.places = vectorTileStyling.place;
    vectorTileStyling.pois = vectorTileStyling.poi;
    vectorTileStyling.roads = vectorTileStyling.road;

    var vectorLayer = L.supermap.tiledVectorLayer("mapbox", {
        noWrap: false,
        format: L.supermap.VectorTileFormat.PBF,
        vectorTileLayerStyles: vectorTileStyling,
        tileTemplate: "https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token={token}",
        token: "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA",
        attribution: 'Tile Data <a href="https://www.mapbox.com/about/maps/" target="_blank">© Mapbox</a> with <a href="http://iclient.supermapol.com/">SuperMap iClient</a>'
    }).addTo(map);


</script>
</body>
</html>